<template>
	<view class="x-modal" v-if="show">
		<view class="x-modal-con">
			<text class="x-modal-con-title" v-if="title && !titleImage">{{ title }}</text>
			<view class="x-modal-con-title2" v-if="title && titleImage">
				<image :src="titleImage" mode="aspectFit" class="ic"></image>
				<view>{{ title }}</view>
			</view>
			<text class="x-modal-con-content" v-if="content">{{ content }}</text>
			<view class="x-modal-con-content" v-if="!content"><slot></slot></view>
			<input class="x-modal-con-inp" type="number" v-model="inputStr" :placeholder="$t('common.input.placeholder')" v-if="showInput" />
			<view class="x-modal-con-btn">
				<view class="x-modal-con-btn-item cancel" v-if="showCancel" :class="{ 'no-cancel': !showOk }" @click="cancel()">取消</view>
				<view class="x-modal-con-btn-item confirm" v-if="showOk" :class="{ 'no-cancel': !showCancel }" @click="confirm()">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'x-modal',
	data() {
		return {
			inputStr: ''
		};
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		titleImage: {
			type: String,
			default: null
		},
		showInput: {
			type: Boolean,
			default: false
		},
		showCancel: {
			type: Boolean,
			default: true
		},
		showOk: {
			type: Boolean,
			default: true
		},
		title: {
			type: [String, Number],
			default: ''
		},
		content: {
			type: [String, Number],
			default: ''
		},
		cancelText: {
			type: String,
			default: ''
		},
		okText: {
			type: String,
			default: ''
		}
	},
	methods: {
		cancel() {
			this.$emit('cancel');
		},
		confirm() {
			if (this.showInput) {
				this.$emit('confirm', { inputStr: this.inputStr });
				this.inputStr = '';
			} else {
				this.$emit('confirm');
			}
		}
	}
};
</script>

<style lang="scss">
.x-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 999999;
	.x-modal-con {
		display: flex;
		flex-direction: column;
		width: 550rpx;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
		box-shadow: 4rpx 8rpx 16rpx rgba(0, 0, 0, 0.05);
		.x-modal-con-title {
			width: 100%;
			font-weight: bold;
			font-size: 36rpx;
			text-align: center;
		}
		.x-modal-con-title2 {
			width: 100%;
			font-weight: bold;
			font-size: 36rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			.ic {
				width: 44rpx;
				height: 44rpx;
				margin-right: 10rpx;
			}
		}
		.x-modal-con-content {
			font-size: 28rpx;
			padding: 20rpx 0;
		}
		.x-modal-con-inp {
			height: 80rpx;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			background-color: #ebf1fc;
		}
		.x-modal-con-btn {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.x-modal-con-btn-item {
				margin-top: 20rpx;
				width: 210rpx;
				padding: 18rpx 0;
				border-radius: 16rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				&.cancel {
					color: #2469f2;
					font-size: 28rpx;
					border: 1px solid #2469f2;
					&.no-cancel {
						width: 100%;
						color: #ffffff;
						font-size: 28rpx;
						background-image: linear-gradient(to right, #0c59f2, #0daeff);
					}
				}

				&.confirm {
					color: #ffffff;
					font-size: 28rpx;
					background-image: linear-gradient(to right, #0c59f2, #0daeff);
					&.no-cancel {
						width: 100%;
					}
				}
			}
		}
	}
}
</style>
